<template>
	<view class="page" :style="{'height':h+'px'}">
		<c-nav-bar title="海钓预约"></c-nav-bar>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="lunbo">

				<u-swiper :list="imglist" @change="e => current = e.current" :autoplay="false" :circular="true"
					indicatorStyle="right: 20px" height="480rpx">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ current + 1 }}/{{ imglist.length }}</text>
					</view>
				</u-swiper>
			</view>
			<view class="info">
				<view class="i_title">{{object.name}}</view>
				<view class="i_price">
					<view>￥<span>{{object.spend}}</span>/{{object.spendType==0?'人':'艘'}}</view>
					<!-- <view>已售<span>{{object.sailNum}}</span></view> -->
				</view>
				<view class="i_contact">
					<view class="ic_left">
						<view>
							<image src="https://i.ringzle.com/file/20231110/d862f9cd1aba48cdbc121c6d6c9dc350.png">
							</image>
							<text>{{object.timeFrame}}</text>
						</view>
						<view>
							<image src="https://i.ringzle.com/file/20231110/1e88660546764e7bae95dd2110bafb09.png">
							</image>
							<text>{{object.address}}</text>
						</view>
					</view>
					<view class="ic_right">
						<view @click="luxian">
							<image src="https://i.ringzle.com/file/20231110/e527212e7d6846c38237a02722d1403b.png">
							</image>
							<text>路线</text>
						</view>
						<view @click="callnewPhone">
							<image src="https://i.ringzle.com/file/20231110/f53f8bfe5adb481c8985f28f0f605186.png">
							</image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tip">
				温馨提示：依据《舟山市国家级海洋特别保护区管理条例》此项目预订需游客已获得海钓许可证，并上传海钓许可证明。
			</view>
			<view class="tabs">
				<view :class="tabIndex==1?'active':''" @click="tese(1)">商品特色</view>
				<!-- <view :class="tabIndex==2?'active':''" @tap="tabIndex=2">购买须知</view> -->
				<view :class="tabIndex==3?'active':''" @click="tese(3)">资质</view>
			</view>
			<view class="t_spts" v-show="tabIndex==1">
				<image :src="object.productFeaturesPic" mode="widthFix"></image>
			</view>
			<!-- 	<view class="t_gmxz" v-v-show="tabIndex==2">
				<view class="tg_item">
					<text class="tgi_title">有效期</text>
					<view class="tgi_nr">
						<view class="tgi_dian"></view>
						<text>购买后30天内有效</text>
					</view>
				</view>
				<view class="tg_item">
					<text class="tgi_title">预约信息</text>
					<view class="tgi_nr">
						<view class="tgi_dian"></view>
						<text>需至少提前1天预约，如遇旅游旺季您您可能需提前3天预约</text>
					</view>
				</view>
				<view class="tg_item">
					<text class="tgi_title">适用人数</text>
					<view class="tgi_nr">
						<view class="tgi_dian"></view>
						<text>当前船型可容纳16人</text>
					</view>
				</view>
				<view class="tg_item">
					<text class="tgi_title">温馨提示</text>
					<view class="tgi_tip">
						<view>1、由于海上项目会受天气影响，随时有可能报停，由此给您造成的不便，请您谅解。近期有动过手术、气喘、感冒、支气管炎、糖尿病、心脏病、高血压、中耳炎、鼻窦炎、癫病、恐惧症外伤 痊愈或患有其他疾病者以及酗酒、孕妇、儿童、老年体弱者等身体不适者不能参加此项目。如有隐瞒自身实际情况，后果自负。</view>
						<view>2、请穿着舒适防滑的鞋子，做好防晒，登船后穿好救生衣，听从船长指挥，海上安全第一。如晕船请登船前1小时服用晕船药。</view>
						<view>3、您预订完成后，商家会与您确认具体登船位置以及时间。</view>
						<view>4、请提前15分钟到达码头，准备登船。</view>
						<view>5、购买完成后，您预约时间后船票不可退，未预约时间随时退。</view>
						<view>6、海上气候多变，如遇大风，暴雨，船只检修等原因不能出港会为您安排改期，或者退款</view>
					</view>
				</view>
			</view> -->
			<view class="t_zz" v-show="tabIndex==3">
				<text>{{object.corporateName}}</text>
				<image :src="object.businessLicense"></image>
			</view>

		</view>
		<u-popup :show="showPhone" @close="showPhone=false">
			<view class="p_phone">
				<view class="pp_title">监督电话</view>
				<view class="pp_tel" @tap="callPhone">{{phoneNumber}}</view>
				<view class="pp_qx" @tap="showPhone=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#111111"
				},
				object: {},
				imglist: [],
				current: 0,
				tabIndex: 1,
				showPhone: false,
				phoneNumber: '0580-5596306'
			}
		},
		onLoad(option) {
			console.log('111111111111111111', option)
			this.getdata(option.id);
		},

		methods: {
			getdata(e) {
				this.$api.get('/api/fishingappointment/details', {
					id: e,
					type: 200,
				}).then(res => {
					console.log('111111111111111111', res.data.data)
					//  res.data.data[0].multiplePicList= res.data.data[0].multiplePicList.split(',');
					this.imglist = res.data.data[0].multiplePicList;
					this.object = res.data.data[0];

				})
			},

			tese(e) {
				console.log('eeeeeeeeeeeeeeee', e)
				this.tabIndex = e;
			},
			toBuy() {
				// uni.navigateTo({
				// 	url:'/pagesIndex/seaFishing/pay?object='+JSON.stringify({
				// 		id:this.object.id,
				// 		title:this.object.title,
				// 		price:this.object.price
				// 	})
				// })
			},
			callnewPhone() {
				uni.makePhoneCall({
					phoneNumber: this.object.phone
				});
			},
			luxian() {
				console.log('111111111111111111', this.object)
				uni.openLocation({
					latitude: Number(this.object.latitude),
					longitude: Number(this.object.longitude),
					name: this.object.address,
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		overflow-y: auto;

		.content {
			.lunbo {
				width: 100%;
				height: 480rpx;
			}

			.info {
				width: 100%;
				background: #fff;
				border-radius: 24rpx 24rpx 0 0;
				padding: 36rpx 24rpx 48rpx;
				box-sizing: border-box;

				.i_title {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				.i_price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					color: #FD3939 !important;

					&>view {
						&:first-child {
							font-size: 24rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #FD3939;

							span {
								font-size: 40rpx;
							}
						}
					}
				}

				.i_contact {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;

					.ic_left {
						&>view {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
							}

							text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-left: 16rpx;
							}

							&:last-child {
								margin-top: 30rpx;
							}
						}
					}

					.ic_right {
						display: flex;

						&>view {
							display: flex;
							flex-direction: column;
							align-items: center;

							image {
								width: 48rpx;
								height: 48rpx;
							}

							text {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #808080;
								margin-top: 16rpx;
							}

							&:last-child {
								margin-left: 48rpx;
							}
						}
					}
				}
			}

			.tip {
				padding: 18rpx 24rpx 22rpx;
				width: 100%;
				box-sizing: border-box;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				background: #FFF4EC;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
			}

			.tabs {
				border-top: 20rpx solid #F5F8FA;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-around;

				&>view {
					width: calc(100% / 2);
					padding: 30rpx 0;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					position: relative;

					&.active {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;

						&::after {
							content: '';
							width: 120rpx;
							height: 6rpx;
							background: #007A69;
							position: absolute;
							left: 50%;
							margin-left: -60rpx;
							bottom: 0;
						}
					}
				}
			}

			.t_spts {
				image {
					width: 100%;
				}
			}

			.t_gmxz {
				padding: 29rpx 24rpx 80rpx;
				box-sizing: border-box;

				.tg_item {
					margin-top: 48rpx;

					&:first-child {
						margin-top: 0;
					}

					.tgi_title {
						font-size: 26rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					.tgi_nr {
						display: flex;
						align-items: center;
						margin-top: 28rpx;

						.tgi_dian {
							width: 10rpx;
							height: 10rpx;
							background: #D8D8D8;
							border-radius: 50%;
						}

						text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-left: 11rpx;
						}
					}

					.tgi_tip {
						padding-top: 13rpx;

						&>view {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 36rpx;
						}
					}
				}
			}

			.t_zz {
				width: 100%;
				padding: 30rpx 30rpx 134rpx;
				box-sizing: border-box;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 100%;
					height: 484rpx;
					margin-top: 46rpx;
				}
			}

			.operation {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 30rpx 16rpx 48rpx;
				width: 100%;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 9;

				.o_left {
					display: flex;

					&>view {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-top: 12rpx;
						}

						// &:last-child{
						// 	margin-left: 88rpx;
						// }
					}
				}

				.o_right {
					width: 220rpx;
					height: 80rpx;
					background:#007A69;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}

		.p_phone {
			&>view {
				text-align: center;
				width: 100%;

				&.pp_title {
					padding: 30rpx 0;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				&.pp_tel {
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 28rpx 0 33rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #01B9F9;
				}

				&.pp_qx {
					padding: 31rpx 0 99rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					border-top: 20rpx solid #F5F7F8;
				}
			}
		}

		/deep/.u-popup__content {
			border-radius: 32rpx 32rpx 0 0;
		}

		/deep/.u-scroll-list {
			padding-bottom: 0;
		}
	}
</style>
<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>